<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"><meta name="robots" content="noindex">
    <link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico">
    <link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111">
    <link rel="canonical" href="https://codepen.io/coinoperatedgoi/pen/VmzqrJ">

    <link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300">
    <link rel="stylesheet prefetch" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style class="cp-pen-styles">
        .hover-state {
        background: rgba(255, 255, 255, 0.1);
        -webkit-transition: background 0.1s ease-in-out;
        transition: background 0.1s ease-in-out;
    }
    body {
        position: absolute;
        font-family: 'Open Sans', sans-serif;
        font-size: 1em;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        overflow: hidden;
    }
    body,
    html,
    .desktop {
        margin: 0;
        width: 100%;
        height: 100%;
        position: relative;
    }
    .desktop {
        background: url(http://andrewashley.co.nz/code-examples/images/windows10.jpg) center right no-repeat;
        background-size: cover;
    }
    .taskbar {
        position: absolute;
        z-index: 9000;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        color: #fff;
    }
    .taskbar:before,
    .taskbar:after {
        content: "";
        display: block;
        width: 100%;
        clear: both;
    }
    .taskbar .icon {
        position: relative;
        display: inline-block;
        height: 50px;
        width: 50px;
        text-align: center;
        font-size: 2em;
        -webkit-transition: background 0.2s ease-out;
        transition: background 0.2s ease-out;
    }
    .taskbar .icon:hover {
        background: rgba(255, 255, 255, 0.1);
        -webkit-transition: background 0.1s ease-in-out;
        transition: background 0.1s ease-in-out;
    }
    .taskbar .icon:hover .fa-windows {
        color: #aaa;
    }
    .taskbar .icon.win.open {
        background: rgba(255, 255, 255, 0.1);
        -webkit-transition: background 0.1s ease-in-out;
        transition: background 0.1s ease-in-out;
    }
    .taskbar .icon.minimized:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 5px;
        right: 5px;
        height: 2px;
        background: rgba(255, 255, 255, 0.5);
        -webkit-transition: all 0.15s ease-out;
        transition: all 0.15s ease-out;
    }
    .taskbar .icon.minimized:hover:after,
    .taskbar .icon.minimized.open:after {
        -webkit-transition: all 0.15s ease-out;
        transition: all 0.15s ease-out;
        left: 0;
        right: 0;
    }
    .taskbar .icon .app-preview {
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        bottom: 50px;
        width: 150px;
        height: 0;
        margin-left: -50px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-bottom: 0;
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }
    .taskbar .icon .app-preview.preview-edge .content {
        overflow: hidden;
        position: relative;
    }
    .taskbar .icon .app-preview.preview-edge .content:after {
        content: "";
        display: block;
        position: absolute;
        z-index: 100;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: transparent;
    }
    .taskbar .icon .app-preview.preview-edge .content .edge-browser {
        background: transparent !important;
        width: 520px !important;
        height: 400px !important;
        -webkit-transform: scale(0.3);
        transform: scale(0.3);
        -webkit-transform-origin: top left;
        transform-origin: top left;
    }
    .taskbar .icon.edge {
        color: #5a93e8;
    }
    .taskbar .icon.edge:hover .app-preview {
        visibility: visible;
        opacity: 1;
        height: 100px;
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
        -webkit-transition-delay: 1s;
        transition-delay: 1s;
    }
    .taskbar .icon.edge.open .app-preview {
        visibility: hidden;
        opacity: 0;
    }
    .taskbar > .programs,
                  .taskbar > .tray {
                                    height: 50px;
                                    line-height: 50px;
                                }
    .taskbar > .programs {
                      float: left;
                      width: 50%;
                  }
    .taskbar > .tray {
                      float: right;
                      width: 50%;
                      text-align: right;
                  }
    .taskbar > .tray .peek {
                      display: inline-block;
                      width: 10px;
                      height: 50px;
                      margin-left: 10px;
                      border-left: 1px solid rgba(255, 255, 255, 0.5);
                      float: right;
                  }
    .taskbar > .tray .peek:hover {
                      background: rgba(255, 255, 255, 0.1);
                      -webkit-transition: background 0.1s ease-in-out;
                      transition: background 0.1s ease-in-out;
                  }
    .taskbar > .tray .all-icons {
                      visibility: hidden;
                      position: absolute;
                      bottom: 50px;
                      width: 150px;
                      margin-left: -60px;
                      padding: 5px;
                      background: rgba(0, 0, 0, 0.5);
                      text-align: left;
                  }
    .taskbar > .tray .all-icons .fa {
                      float: left;
                      margin: 10px;
                  }
    .taskbar > .tray .all-icons.open {
                      visibility: visible;
                  }
    .taskbar > .tray .ico {
                      display: inline-block;
                      font-size: 1.4em;
                      width: 30px;
                      height: 50px;
                      text-align: center;
                  }
    .taskbar > .tray .ico:hover {
                      background: rgba(255, 255, 255, 0.1);
                      -webkit-transition: background 0.1s ease-in-out;
                      transition: background 0.1s ease-in-out;
                  }
    .taskbar > .tray .ico.time {
                      position: relative;
                      top: 6px;
                      height: auto;
                      width: 60px;
                      line-height: 20px;
                  }
    .taskbar > .tray .ico.time .clock,
                  .taskbar > .tray .ico.time .date {
                                    text-align: center;
                                    height: auto;
                                    font-size: 0.8em;
                                    line-height: 1em;
                                }
    .taskbar > .tray .ico.time .date {
                      margin-top: 5px;
                  }
    .taskbar > .tray .ico.time:hover {
                      background: transparent;
                  }
    .startmenu {
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        background: rgba(0, 0, 0, 0.7);
        position: absolute;
        bottom: 50px;
        left: 0;
        height: 300px;
        width: 550px;
        padding-top: 5px;
        border-top: 1px solid rgba(255, 255, 255, 0.4);
        border-right: 1px solid rgba(255, 255, 255, 0.4);
    }
    .startmenu.open {
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        height: 400px;
        opacity: 1;
        visibility: visible;
    }
    .startmenu.open .icons .bottom {
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        opacity: 1;
    }
    .startmenu.open .programs .item {
        margin-bottom: 1px;
        -webkit-transition: margin 0.5s ease-out;
        transition: margin 0.5s ease-out;
    }
    .startmenu.open .tiles .tile {
        margin-top: 0px;
        -webkit-transition: margin 0.5s ease-out;
        transition: margin 0.5s ease-out;
    }
    .startmenu .title {
        margin: 6px 0 0 0;
        padding: 8px 0 4px 10px;
    }
    .startmenu .title:hover {
        background: #333;
    }
    .startmenu > .container-fluid {
                        padding: 0;
                        height: 100%;
                    }
    .startmenu > .container-fluid .row {
                        margin-right: 0;
                    }
    .startmenu > .container-fluid .row,
                    .startmenu > .container-fluid .programs,
                                    .startmenu > .container-fluid .tiles {
                                                        height: inherit;
                                                        position: relative;
                                                    }
    .startmenu .icons {
        position: absolute;
        z-index: 500;
        top: 0;
        bottom: 0;
        left: 15px;
        width: 50px;
        overflow: hidden;
        -webkit-transition: all 0.1s ease-out;
        transition: all 0.1s ease-out;
    }
    .startmenu .icons.open {
        width: 200px;
        background: #333;
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
    }
    .startmenu .icons .icon {
        position: relative;
        line-height: 50px;
        width: 100%;
        text-align: left;
    }
    .startmenu .icons .icon .fa {
        margin-left: 17px;
    }
    .startmenu .icons .icon img {
        max-width: 36px;
        margin-left: -4px;
    }
    .startmenu .icons .icon > span {
                                     position: absolute;
                                     left: 60px;
                                     font-size: 0.6em;
                                     line-height: 50px;
                                     width: 100px;
                                     height: 50px;
                                     text-align: left;
                                 }
    .startmenu .icons .icon > span.start {
                                     text-transform: uppercase;
                                     font-size: 1em;
                                     line-height: 2.5em;
                                 }
    .startmenu .icons .icon.top {
        position: absolute;
        z-index: 100;
    }
    .startmenu .icons .bottom {
        position: relative;
        bottom: 0;
        height: 100%;
        opacity: 0;
    }
    .startmenu .icons .bottom .icon {
        position: absolute;
    }
    .startmenu .icons .bottom .icon.power {
        bottom: 0;
    }
    .startmenu .icons .bottom .icon.settings {
        bottom: 50px;
    }
    .startmenu .icons .bottom .icon.file-explorer {
        bottom: 100px;
    }
    .startmenu .icons .bottom .icon.profile {
        bottom: 150px;
        padding: 0 12px;
    }
    .startmenu .icons .bottom .icon.profile img {
        display: inline;
        border-radius: 50%;
    }
    .startmenu .programs {
        overflow: hidden;
        overflow-y: auto;
        padding-left: 0;
        padding-right: 0;
    }
    .startmenu .programs .item {
        font-size: 20px;
        margin-bottom: 10px;
        padding: 2px 0 2px 10px;
    }
    .startmenu .programs .item:hover {
        background: #333;
    }
    .startmenu .programs .item .fa {
        background: #999;
        padding: 5px;
    }
    .startmenu .programs .item span {
        margin-left: 10px;
        font-size: 12px;
        line-height: 30px;
        vertical-align: bottom;
    }
    .startmenu .tiles {
        padding-right: 1px;
        overflow: hidden;
        padding-right: 12px;
    }
    .startmenu .tiles:hover {
        overflow-y: auto;
        padding-right: 0;
    }
    .startmenu .tiles .title {
        padding-left: 0;
    }
    .startmenu .tiles .title:hover {
        background: transparent;
    }
    .startmenu .tiles .tile {
        position: relative;
        background: #333;
        border: 2px solid #333;
        padding: 30px;
        min-height: 110px;
        margin-bottom: 4px;
        margin-top: 30px;
        text-align: center;
    }
    .startmenu .tiles .tile.photos {
        background: url(http://lorempixel.com/200/150/cats/) center no-repeat;
        background-size: cover;
    }
    .startmenu .tiles .tile.twitter {
        /*background: url(https://andrewashley.co.nz/code-examples/images/twitter_icon_2011.png) center no-repeat;*/
        background-size: cover;
    }
    .startmenu .tiles .tile.news {
        background: url(http://lorempixel.com/400/150/business/) center no-repeat;
        background-size: cover;
    }
    .startmenu .tiles .tile:hover {
        border: 2px solid #eee;
    }
    .startmenu .tiles .tile .fa {
        font-size: 25px;
    }
    .startmenu .tiles .tile > span {
                                     position: absolute;
                                     bottom: 4px;
                                     left: 4px;
                                     right: 4px;
                                     text-align: left;
                                 }
    .startmenu .tiles .tile > span .fa {
                                     float: right;
                                     font-size: 14px;
                                 }
    .startmenu .tiles .tile.wide {
        width: 100%;
        clear: both;
    }
    .startmenu .tiles .tile.medium {
        width: 49%;
        float: left;
    }
    .startmenu .tiles .tile.medium:nth-child(odd) {
        margin-right: 4px;
    }
    .startmenu .tiles .tile.medium:nth-child(even) {
        float: right;
    }
    body.peek .startmenu.open,
    body.peek .window,
    body.peek .app {
        opacity: 0.1;
    }
    .app {
        overflow: hidden;
        z-index: 10;
        border: 1px solid #000000;
        width: 550px;
        height: 400px;
        -webkit-transform-origin: bottom left;
        transform-origin: bottom left;
        -webkit-transition: opacity 0.2s ease-in-out;
        transition: opacity 0.2s ease-in-out;
    }
    .app.minimized {
        opacity: 0;
        visibility: hidden;
    }
    .app.open {
        bottom: 550px;
        left: 250px;
        opacity: 1;
        visibility: visible;
        -webkit-transition: opacity 0.2s ease-in-out;
        transition: opacity 0.2s ease-in-out;
    }
    .app .toolbar {
        background: #999;
        height: 30px;
        font-size: 12px;
        overflow: hidden;
    }
    .app .toolbar:before,
    .app .toolbar:after {
        content: "";
        display: block;
        width: 100%;
        clear: both;
    }
    .app .toolbar .tab {
        position: relative;
        padding: 0 10px;
        width: 100px;
        line-height: 30px;
        background: #aaa;
        float: left;
    }
    .app .toolbar .tab:after {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\f067";
        position: absolute;
        right: -20px;
        top: 10px;
    }
    .app .toolbar .tab span {
        margin-left: 6px;
    }
    .app .toolbar .tab .fa-times {
        float: right;
        line-height: 30px;
    }
    .app .toolbar .tab .fa-times:hover {
        color: #990000;
    }
    .app .addressbar {
        line-height: 30px;
    }
    .app .addressbar i {
        padding: 0 10px;
    }
    .app .addressbar span {
        margin: 0 5px;
    }
    .app .addressbar span.divider {
        border-right: 1px solid #777;
    }
    .app .addressbar input {
        background: transparent;
        border: 0;
        outline: none;
    }
    .app.id-edge {
        background: #aaa;
    }
    a {
        cursor: default;
    }
    ::-webkit-scrollbar {
        width: 12px;
    }
    ::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
    }
    ::-webkit-scrollbar-thumb {
        background: #c3c3c3;
    }
    ::-webkit-scrollbar-button {
        background-size: 100%;
        height: 10px;
        width: 10px;
        -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
    }
    ::-webkit-scrollbar-button:vertical:increment {
        background-position: center top;
        /*background-image: url(https://andrewashley.co.nz/code-examples/images/downarrow0.png);*/
    }
    ::-webkit-scrollbar-button:vertical:decrement {
        background-position: center bottom;
        /*background-image: url(https://andrewashley.co.nz/code-examples/images/uparrow0.png);*/
    }
    .ui-draggable-dragging iframe,
    .ui-resizable-resizing iframe {
        pointer-events: none;
    }
    </style></head><body style="cursor: auto;">

<!-- Currently the Start menu open and close is functional-->
<!-- As is the "expand" burger menu option.-->
<!-- Tiles area is scrollable.-->
<!-- Peek works when Start menu or Edge are open-->
<!-- Working on improving Edge app:-->
<!-- Edge Addressbar now works - although won't load sites with x-frame-options "deny". Also codepen needs to be loaded on http not https or else mixed mode will occur if trying to load a non-https site in the Edge app-->
<!-- Edge refresh button now works-->
<!-- Working on making edge icon hover show live preview of browser nicely-->
<!-- Want to add in other taskbar functions - working volume etc. And also a restart / start / shutdown animation when I can find the time.-->
<!-- #Start menu scroll bar not as nice in Firefox / IE - use chrome where possible-->
<!---->
<div class="desktop"></div>
<div class="taskbar">
    <div class="programs">
        <div class="icon win" data-target=".startmenu, .icon.win"><i class="fa fa-windows"></i></div>
        <div class="icon cortana" title="Ask me anything" data-target="#cortana"><i class="fa fa-circle-o"></i></div>
        <div class="icon application minimized edge open" data-target=".id-edge">
            <div class="app-preview preview-edge">
                <div class="content">
                    <!--<iframe class="edge-browser" src="http://www.andrewashley.co.nz" width="100%" height="100%" frameborder="0"></iframe>-->

                </div>
            </div><i class="fa fa-edge"></i>
        </div>
        <div class="icon application skype open" data-target="#skype"><i class="fa fa-skype"></i></div>
    </div>
    <div class="tray">
        <div class="ico more-icons">
            <div class="all-icons"><i class="fa fa-bluetooth" title="Bluetooth Devices"></i><i class="fa fa-cloud" title="OneDrive up to date"></i><i class="fa fa-envelope" title="You have new unread e-mail messages"></i><i class="fa fa-flag" title="Windows Defender requires attention"></i><i class="fa fa-keyboard-o" title="Keyboard En-NZ"></i><i class="fa fa-shield" title="Your computer is protected"></i><i class="fa fa-wifi" title="Internet Access"></i><i class="fa fa-dropbox" title="Dropbox Synced"></i></div>
            <div class="fa fa-chevron-up" title="Show hidden icons"></div>
        </div>
        <div class="ico" title="Speakers: 80%"><i class="fa fa-volume-up"></i></div>
        <div class="ico" title="50% remaining"><i class="fa fa-battery-half"></i></div>
        <div class="ico time">
            <div class="clock">8:32 PM</div>
            <div class="date">8/27/2017</div>
        </div>
        <div class="ico" title="No new notifications"><i class="fa fa-commenting-o"></i></div>
        <div class="peek"></div>
    </div>
    <div class="startmenu">
        <div class="container-fluid">
            <div class="row">
                <div class="col icons">
                    <div class="icon top bars" title="Expand"><i class="fa fa-bars"></i><span class="start">start</span></div>
                    <div class="bottom">
                        <div class="icon profile" title="Andrew Ashley"><a href="http://www.andrewashley.co.nz" target="_blank"><img class="img-responsive" src="http://andrewashley.co.nz/media/1007/profile-photo.jpg"></a><span>Andrew Ashley</span></div>
                        <div class="icon file-explorer" title="File Explorer"><i class="fa fa-folder"></i><span>File Explorer</span></div>
                        <div class="icon settings" title="Settings"><i class="fa fa-cog"></i><span>Settings</span></div>
                        <div class="icon power" title="Power"><i class="fa fa-power-off"></i><span>Power</span></div>
                    </div>
                </div>
                <div class="col-xs-4 col-xs-offset-2 programs">
                    <p class="title">Recently added</p>
                    <div class="item"><i class="fa fa-skype"></i><span>Skype</span></div>
                    <div class="item"><i class="fa fa-file-excel-o"></i><span>Excel</span></div>
                    <p class="title">Most used</p>
                    <div class="item"><i class="fa fa-chrome"></i><span>Google Chrome</span></div>
                    <div class="item"><i class="fa fa-firefox"></i><span>Mozilla Firefox</span></div>
                </div>
                <div class="col-xs-6 tiles">
                    <p class="title">Life at a glance
                    </p><div class="tile wide"><i class="fa fa-calendar"></i><span>Calendar</span></div>
                    <div class="tile medium"><i class="fa fa-file-pdf-o"></i><span>Adobe Acrobat</span></div>
                    <div class="tile medium photos"><span>Photos<i class="fa fa-picture-o"></i></span></div>
                    <div class="tile medium twitter"><span>Twitter<i class="fa fa-twitter"></i></span></div>
                    <div class="tile medium"><i class="fa fa-envelope"></i><span>Mail</span></div>
                    <div class="tile wide news"><span>News<i class="fa fa-newspaper-o"></i></span></div>
                    <div class="tile medium"><i class="fa fa-calculator"></i><span>Calculator</span></div>
                    <div class="tile medium"><i class="fa fa-camera"></i><span>Camera</span></div>
                    <p></p>
                </div>
            </div>
        </div>
    </div>
</div>


<!--<div class="id-edge app ui-draggable ui-resizable open" style="position: relative; width: 128.8px; height: 354.8px;">-->
    <!--<div class="toolbar draggable ui-draggable-handle">-->
        <!--<div class="tab"><i class="fa fa-list-alt"> </i><span>Start</span><i class="fa fa-times"></i></div>-->
    <!--</div>-->
    <!--<div class="addressbar draggable ui-draggable-handle"><i class="fa fa-arrow-left"></i><i class="fa fa-arrow-right"></i><i class="fa fa-refresh"></i><span class="divider"></span>-->
        <!--<input class="edge-url" value="andrewashley.co.nz">-->
    <!--</div>-->

    <!--&lt;!&ndash;<iframe class="edge-browser" src="http://www.andrewashley.co.nz" width="100%" height="100%" frameborder="0"></iframe>&ndash;&gt;-->
    <!--<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>-->
    <!--<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;">-->

    <!--</div>-->
<!--</div>-->
<!--<script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        // Desktop
        $('.icon.win').on('click', function() {
            var target = $(this).attr('data-target');
            $(target).toggleClass('open');
            $('.all-icons').removeClass('open');
        });

        $('.icon.top.bars').on('click', function() {
            $('.startmenu .col.icons').toggleClass('open');
        });

        $('.desktop, .app, .program, .icon.application, .cortana').on('click', function() {
            $('.startmenu, .icons, .icon.win, .all-icons').removeClass('open');
        });

        $('.tray .peek').on('mouseenter', function() {
            $('body').addClass('peek');
        });

        $('.tray .peek').on('mouseleave', function() {
            $('body').removeClass('peek');
        });

        $('.tray .more-icons').on('click', function(){
            $('.all-icons').toggleClass('open');
        });

        $('.taskbar .icon.application').on('click', function() {
            var target = $(this).attr('data-target');
            $(target).toggleClass('open minimized');
            $(this).toggleClass('open');
        });


        // App Preview
//        $('.icon.edge').on('mouseenter', function() {
//            var $browserWindow = $('.id-edge iframe').clone();
//            var $previewWindow = $('.app-preview.preview-edge .content');
//            $previewWindow.html('');
//            $previewWindow.html($browserWindow);
//        });


        // Apps
        $( ".app" ).draggable({ handle: ".draggable" });
        $( ".app" ).resizable();


        // Edge Addressbar
            /*
        var $addressbar = $('.edge-url');
        $addressbar.keypress(function (e) {
            if (e.which == 13) {
                var address = $addressbar.val();
                $('.edge-browser').attr('src', 'http://' + address);
            }
        });

        $('.id-edge .fa-refresh').on('click', function(){
            var address = $addressbar.val();
            $('.edge-browser').attr('src', 'http://' + address);
        });
        */

    });


// Setup Clock / Date
var d = new Date(),
    day = d.getDate(),
    month = d.getMonth() + 1,
    year = d.getFullYear();

function format_time() {
    // formats a javascript Date object into a 12h AM/PM time string
    var dt = new Date();
    var hour = dt.getHours();
    var minute = dt.getMinutes();
    var seconds = dt.getSeconds();
    var amPM = (hour > 11) ? " PM" : " AM";
    if(hour > 12) {
        hour -= 12;
    } else if(hour == 0) {
        hour = "12";
    }
    if(minute < 10) {
        minute = "0" + minute;
    }
    $('.clock').text(hour + ":" + minute + amPM);
}

function clock() {
    setInterval(format_time, 1000);
}

clock();
$('.date').text(month + '/' + day + '/' + year);

</script>
</body></html>